import dayjs from "dayjs";
import { ReactNode } from "react";
import { useReactive } from "ahooks";
import { Picker, Text, View } from "@tarojs/components";

import ByCell from "@/components/ui/ByCell";
import ByCol from "@/components/ui/ByCol";
import ByIcon from "@/components/ui/ByIcon";
import ByRow from "@/components/ui/ByRow";
import ByText from "@/components/ui/ByText";
import Divider from "@/components/app/Divider";
import FormInput from "@/components/common/FormInput";
import FormInputNumber from "@/components/common/FormInputNumber";

import { MaterialBudgetItem } from "@/types/budget";

export const CartItemOfBase = ({
  source,
  children,

  onRemove,
}: {
  source: any;
  children?: ReactNode;
  onRemove: () => void;
}) => {
  return (
    <View className="px-3 pt-3 bg-white rounded-lg">
      <ByRow content="between">
        <Text>{source.materialName || source.masterName}</Text>
        <ByIcon
          size={34}
          name="Remove"
          className="text-error ml-2"
          onClick={onRemove}
        />
      </ByRow>
      {children}
    </View>
  );
};

/**
 * 测量项
 */
export const CartItemOfMeasure = ({
  source,
  onRemove,
}: {
  source: any;
  onRemove: () => void;
}) => {
  const model = useReactive(source);

  return (
    <CartItemOfBase source={source} onRemove={onRemove}>
      <View className="py-2">
        <ByCell label="供应商" labelWidth="5em">
          {model.supplyName}
        </ByCell>

        <Picker
          mode="date"
          value={model.requireMeasureDate}
          onChange={(e) => (model.requireMeasureDate = e.detail.value)}
        >
          <ByCell label="测量时间" labelWidth="5em">
            <FormInput
              disabled
              suffix={
                <ByIcon name="Calendar" size={34} className="text-second" />
              }
              value={model.requireMeasureDate}
              placeholder="选择时间"
            />
          </ByCell>
        </Picker>

        <ByCell label="备注" labelWidth="5em">
          <FormInput
            value={model.remark}
            placeholder="输入备注"
            onChange={(e) => (model.remark = e)}
          />
        </ByCell>
      </View>
    </CartItemOfBase>
  );
};

const menuList = [
  { text: "已申请", key: "appapplyNum" },
  { text: "已开单", key: "billNum" },
  { text: "结算量", key: "jsNum" },
];

/**
 * 非测量的，其他：主材、辅材、灯具、自选等
 */
export const CartItem = ({
  source,
  isOptional,

  onRemove,
}: {
  // 是否是自选材料
  isOptional: boolean;
  source: MaterialBudgetItem;
  onRemove: () => void;
}) => {
  const model = useReactive(source);

  return (
    <CartItemOfBase source={source} onRemove={onRemove}>
      <ByRow>
        <ByCol span={6}>
          <ByCell label="规格参数">{source.spec || "-"}</ByCell>
        </ByCol>
        <ByCol span={6}>
          <ByCell label="品牌">{source.brandCategory || "-"}</ByCell>
        </ByCol>
      </ByRow>

      <ByRow content="between" className="bg-page p-2 rounded-md">
        {menuList.map((item) => (
          <View className="text-center" key={item.key}>
            <ByText size="sm" type="second">
              {item.text}
            </ByText>
            <View className="mt-1">{source[item.key] || 0}</View>
          </View>
        ))}
      </ByRow>

      <Divider />

      <View className="py-2">
        <ByCell label="销售数量">
          <FormInputNumber
            precision={2}
            suffix={source.unit}
            placeholder="输入数量"
            defaultValue={model.applyQuantity}
            onChange={(e) => (model.applyQuantity = e)}
          />
        </ByCell>

        {/* 自选材料才展示 */}
        {isOptional && (
          <ByRow className="mb-2 pl-[5em]" content="between">
            <ByText size="sm" type="second">
              承包单价：¥{source.contractPrice}
            </ByText>
            <ByText size="sm" type="second">
              承包金额：¥{source.contractPrice * source.applyQuantity}
            </ByText>
          </ByRow>
        )}

        <Picker
          mode="date"
          value={model.requiredArrivalTime}
          start={dayjs().format("YYYY-MM-DD")}
          onChange={(e) => (model.requiredArrivalTime = e.detail.value)}
        >
          <ByCell label="到场时间">
            <FormInput
              disabled
              suffix={
                <ByIcon name="Calendar" size={34} className="text-second" />
              }
              value={model.requiredArrivalTime}
              placeholder="选择时间"
            />
          </ByCell>
        </Picker>
      </View>
    </CartItemOfBase>
  );
};
